import React, { useState } from 'react';
import {Outlet,Link} from 'react-router-dom';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;

const Home = () => {
    const [collapsed, setCollapsed] = useState(false);

    const onCollapse = (collapsed) => {
        setCollapsed(collapsed);
    };

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                <div className="logo" />
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                <Menu.Item key="1" icon={<UserOutlined />}>
                        <Link to='/home/welcome'>首页</Link>
                    </Menu.Item>
                    <Menu.Item key="2" icon={<UserOutlined />}>
                        <Link to='/home/reserve'>客房预定</Link>
                    </Menu.Item>
                    <Menu.Item key="3" icon={<PieChartOutlined />}>
                    <Link to='/home/pay'>支付管理</Link>
                    </Menu.Item>
                    <Menu.Item key="4" icon={<DesktopOutlined />}>
                    <Link to='/home/client'>客户管理</Link>
                    </Menu.Item>
                    <Menu.Item key="5" icon={<TeamOutlined />}>
                    <Link to='/home/room'>客房管理</Link>
                    </Menu.Item>
                    <Menu.Item key="6" icon={<FileOutlined />}>
                    <Link to='/home/finance'>财务报表</Link>
                    </Menu.Item>
                    <Menu.Item key="7" icon={<FileOutlined />}>
                    <Link to='/home/system'>系统设置</Link>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
                {/* <Header className="site-layout-background" style={{ padding: 0 }} />
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb> */}
                <Content style={{ margin: '0 16px' }}>
                    <div className="site-layout-background" style={{ 
                        padding: 24, 
                        minHeight: 360 
                        }}>
                         <Outlet/>   {/*在此修改内容  即占位符 子路由显示在这里    */}
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Designed 2024 by First Group</Footer>
            </Layout>
        </Layout>
    );
};

export default Home;